<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<c:if test="${empty user}">
	<c:redirect
		url="../UserServlet?task=queryUserById&id=${sessionScope.userId }"></c:redirect>
</c:if>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="css/base.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
<link href="css/m.css" rel="stylesheet">
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<title>关于我</title>
</head>
<body>
	<header>
	<div class="logo">
		<h3>${sessionScope.username }的个人博客</h3>
	</div>
	<nav id="nav">
	<ul>
		<li><a id="index" href="index.jsp">网站首页</a></li>
		<c:if test="${empty sessionScope.reqUser }">
			<li><a
				href="BlogServlet?task=queryMyBlog&author=${sessionScope.username }">个人博客</a></li>
		</c:if>
		<li><a id="selected" href="user/about.jsp">个人资料</a></li>
		<c:if test="${empty sessionScope.reqUser }">
		<li><a href="ShareServlet?task=queryShareList&username=${sessionScope.username }">生活记录</a></li>
		</c:if>
		<c:if test="${!empty sessionScope.reqUser }">
		<li><a href="ShareServlet?task=queryShareList&username=${sessionScope.reqUser }">生活记录</a></li>
		</c:if>
		<li><a
			href="user/message.jsp">留言板</a></li>
	</ul>
	</nav> </header>
	<div class="mnav">
		<ul>
			<li><a id="index" href="index.jsp">网站首页</a></li>
			<c:if test="${empty sessionScope.reqUser }">
				<li><a
					href="BlogServlet?task=queryMyBlog&author=${sessionScope.username }">个人博客</a></li>
			</c:if>
			<li><a
				href="UserServlet?task=queryUserById&id=${sessionScope.userId }">个人资料</a></li>
			<li><a href="user/share.jsp">生活记录</a></li>
			<li><a href="user/message.jsp">留言板</a></li>
		</ul>
	</div>
	<article>
	<div class="l_box">
		<div class="about_me">
			<h2>关于我</h2>
			<ul>
				<c:if test="${empty user.img }">
					<i><img src="images/timg.jpg"></i>
				</c:if>
				<c:if test="${!empty user.img }">
					<i><img src="/images/${sessionScope.userImg }"></i>
				</c:if>

				<p id="updataImg">
					<b>姓名：${user.username }<span style="cursor: pointer;"
						onclick="logout()">[退出登录]</span></b><br> <a id="myImg"
						style="display: none; cursor: pointer;">修改头像</a>
				<form action="UserServlet?task=changePic&id=${user.id }"
					method="post" enctype="multipart/form-data" id="uploadImg"
					style="margin-top: 8px; height: 35px; display: none">
					<span id="uploadImg"><input type="text" name="id"
						value="${user.id }" style="display: none" /><input type="file"
						id="filevalue" style="width: 150px; margin-bottom: 25px" size="1"
						name="img" /> <input type="submit" value="修改头像"
						style="float: left; margin-left: 30px;" style="cursor: pointer" />
					</span>

				</form>
				</p>
			</ul>
		</div>
		<div class="search">
			<form action="BlogServlet?task=queryBlog" method="post"
				name="searchform" id="searchform">
				<input name="title" id="keyboard" class="input_text"
					value="请输入要搜索的文章标题" style="color: rgb(153, 153, 153);"
					onfocus="if(value=='请输入关键字词'){this.style.color='#000';value=''}"
					onblur="if(value==''){this.style.color='#999';value='请输入要搜索的文章标题'}"
					type="text"> <input name="show" value="title" type="hidden">
				<input name="tempid" value="1" type="hidden"> <input
					name="tbname" value="news" type="hidden"> <input
					name="Submit" class="input_submit" value="搜索" type="submit">
			</form>
		</div>
		<div class="fenlei">
			
		</div>
		<div class="tuijian">
			<h2>最新博客</h2>
			<ul>
				<c:forEach items="${newblogList}" var="newblog">

					<li><a class="article"
						href="BlogServlet?task=queryBlogById&id=${newblog.id }"
						title="${newblog.title }" id="${newblog.id }"> <c:if
								test="${fn:length(newblog.title)>10 }">
                         ${fn:substring(newblog.title, 0, 10)}...
                  </c:if> <c:if test="${fn:length(newblog.title)<=10 }">
                         ${newblog.title }
                   </c:if>
					</a><span style="font-size: 12px; font-weight: normal; float: right">阅读数
							<span id="count">${newblog.count }</span>
					</span></li>
				</c:forEach>

			</ul>
		</div>

		<div class="tuijian">
			<h2>热点博客</h2>
			<ul>
				<c:forEach items="${hotblogList}" var="hotblog">
					<li><a class="article"
						href="BlogServlet?task=queryBlogById&id=${hotblog.id }"
						title="${hotblog.title }" id="${hotblog.id }"> <c:if
								test="${fn:length(hotblog.title)>10 }">
                         ${fn:substring(hotblog.title, 0, 10)}...
                  </c:if> <c:if test="${fn:length(hotblog.title)<=10 }">
                         ${hotblog.title }
                   </c:if>
					</a><span style="font-size: 12px; font-weight: normal; float: right">阅读数
							<span id="count">${hotblog.count }</span>
					</span></li>
				</c:forEach>

			</ul>
		</div>
	</div>
	<div class="r_box">
		<div id="old" class="about" style="line-height: 45px">
			<b>基础资料</b> <a style="float: right; cursor: pointer;"
				id="toUpdataUser">修改信息</a>
			<p style="display: none" id="userId"></p>
			<p>
				姓名：${user.username }<br>
			</p>
			<hr />
			<p id="pwd">
				密码：<a id="updataPwd" style="cursor: pointer;">***********</a><br>
			</p>
			<hr />
			<p>
				性别：${user.sex }<br>
			</p>
			<hr />
			<p>
				联系电话：${user.tel }<br>
			</p>
			<hr />

		</div>
		<div id="new" class="about" style="line-height: 45px; display: none">
			<b>修改基础资料</b>
			<form action="UserServlet?task=updateUser&id=${user.id }"
				method="post" style="height: 220px">
				<input style="display: none" name="id" value="${user.id }">
				<p>
					姓名：<input name="username" type="text" id="username"
						value="${user.username }"><br>
				</p>
				<hr />
				<p id="pwd">
					密码：<a id="updataPwd" style="cursor: pointer;">***********</a><br>
				</p>
				<hr />
				<p>
					性别：<input type="radio" name="sex" value="男" />男<input type="radio"
						name="sex" value="女" />女<br>
				</p>
				<hr />
				<p>
					联系电话：<input type="text" id="tel" name="tel" value="${user.tel }"><br>
				</p>
				<hr />
				<p style="height: 40px; padding-top: 10px">
					<input type="submit" style="float: right; cursor: pointer"
						value="保存">
				</p>
			</form>
		</div>

	</div>
	</article>
	<footer>
	<p>
		Design by <a href="" target="_blank">个人博客</a> <a href="/">ICP备</a>
	</p>
	</footer>
	<script type="text/javascript">
		function logout() {
			window.location.href = "UserServlet?task=logout"
		}
	</script>
	<script type="text/javascript">
		$("#pwd").hover(function() {
			$("#updataPwd").html("修改密码");
		}, function() {
			$("#updataPwd").html("***********");
		});
	</script>
	<script type="text/javascript">
		$("a[id='updataPwd']")
				.click(
						function() {
							var id = $(" input[ name='id' ] ").val();
							$("#pwd")
									.html(
											"<form id='form' action='UserServlet?task=updatePassword&id="
													+ id
													+ "' method='post'>请输入新密码：<input type='password' name='password' id='password'><input type='submit' value='保存'><input id='reset' type='reset' value='取消'></form>")
							$("#reset")
									.click(
											function() {
												$("#pwd")
														.html(
																"密码：<a id='updataPwd' style='cursor: pointer;'>***********</a><br>");
											})
						})
	</script>
	<script type="text/javascript">
		$(".about_me").hover(function() {
			$("#myImg").show();
			$("#myImg").click(function() {
				$("#myImg").hide();
				$("#uploadImg").show();
			})
		}, function() {
			$("#myImg").hide();
			$("#uploadImg").hide();
		});
	</script>
	<script type="text/javascript">
		$("#toUpdataUser").click(function() {

			$("#old").hide();
			$("#new").show();
		})
	</script>
<script type="text/javascript">
		$(function() {
			$
					.ajax({
						type : "post",
						url : "TypeServlet",
						data : {
							"task" : "queryTypeList",
						},
						success : function(msg) {
							var list = eval(msg);
							var str = "<h2>文章分类</h2><ul>";
							for (var i = 0; i < list.length; i++) {
								str += "<li><a href='BlogServlet?task=queryBlogByType&type="+list[i].type+"'>" + list[i].type
								+ "</a></li>"
							}
							str += "</ul>";
							$(".fenlei").append(str)
						},

					})
		})
	</script>

</body>
</html>